<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>then基础知识</title>
</head>
<body>
    <script>
        //then会在promise执行完成后执行,then第一个函数在resolve成功状态执行
        //promise默认是不会执行的
        //then的第一个参数会在成功状态执行
        //then的第二个参数会在失败状态执行
        // const promise = new Promise((resolve,reject) => {
        //     resolve("success");
        // }).then(
        //     value => {
        //         console.log(`解决:${value}`);
        //     },
        //     reason => {
        //         console.log(`拒绝:${reason}`);
        //     }
        // );

        //如果只关心成功则不需要传递then的第二个参数
        // const promise = new Promise((resolve,reject) => {
        //     resolve("success");
        // });
        // promise.then(msg => {
        //     console.log(`成功:${msg}`);
        // });

        //如果只是关心失败，then的第一个参数传递null
        // const promise = new Promise((resolve,reject) => {
        //     reject("is error");
        // });

        // promise.then(null,error => {
        //     console.log(`失败${error}`);
        // });


        //promise传向then的传递值,如果then没有可处理函数，将往后继续调用
        // let p1 = new Promise((resolve,reject) => {
        //     reject("rejected");
        // }).then().then(null,f=>console.log(f));


        //如果onFulFilled不是函数且promise执行成功,p2执行成功并返回相同值
        // let promise = new Promise((resolve,reject) => {
        //     resolve("resolve");
        // });


        // //没有执行任何操作
        // let p2 = promise.then();
        // // console.log(promise);
        // // console.log(p2);
        // p2.then().then(resolve => {
        //     console.log(resolve);
        // });
        // console.log(p2);


        //如果onRejected不是函数且promise拒绝执行,p2拒绝执行并返回相同值
        // let promise = new Promise((resolve,reject) => {
        //     reject("reject");
        // });

        // // console.log(promise);
        // let p2 = promise.then(() => {});
        // p2.then(null,null).then(null,reject=>{
        //     console.log(reject);
        // });


        //12节课  链式调用
        
        //每次的then都是一个全新的promise，默认then返回的promise的状态是fulfuilled

        //每次一个的then都是执行上一个new 的 Promise
        // let promise = new Promise((resolve,reject) => {
        //     //成功了之后返回的
        //     resolve("fulfilled");
        // }).then(resolve => {
        //     // console.log(resolve);
        //     return new Promise(resolve => {
        //         resolve('我是第二个resolve');
        //     });
        // }).then(resolve => {
        //     console.log(resolve);
        // });


        //每一个then都是一个全新的promise
        // let p1 = new Promise(resolve => {
        //     resolve();
        // });


        // //此时的p2已经是一个全新的promise
        // let p2 = p1.then(() => {
        //     console.log('后盾人');
        // });

        // p2.then(() => {
        //     console.log("houdunren.com");
        // });

        // setTimeout(() => {
        //     console.log(p1);
        //     console.log(p2);
        // });


        //then是对上一个promise的reject的处理，每个then都是一个全新的promise.,传递fulfilled
        // new Promise((resolve,reject) => {
        //     //进行失败处理
        //     // reject();
        //     resolve();
        // }).then(
        //     //成功执行
        //     resolve => console.log('fulfilled'),
        //     //失败执行
        //     reject => console.log('rejected')
        // ).then(
        //     resolve => console.log('fulfilled'),
        //     reject => console.log('rejected')
        // ).then(
        //     resolve => console.log("fulfilled"),
        //     reject => console.log('rejected')
        // );

        
        //如果内部返回promise时使用该promise
        // let p1 = new Promise(resolve => {
        //     resolve();
        // });

        // let p2 = p1.then(() => {
        //     return new Promise(r => {
        //         r("houdunren.com");
        //     });
        // });

        // p2.then(v => {
        //     console.log(v);
        // });


        //如果then返回的时promise,后面的then就是对前面的promise的处理,需要等待该promise变更状态之后执行
        // let promise = new Promise(resolve => resolve());
        // let p1 = promise.then(() => {
        //     return new Promise(resolve => {
        //         setTimeout(() => {
        //             console.log(`p1`);
        //             resolve();
        //         },2000);
        //     });
        // }).then(() => {
        //     return new Promise((a,b) => {
        //         setTimeout(() => {
        //             console.log(`p2`);
        //         },3000);
        //     });
        // });
        

        //如果不return 情况就不是这样了,即外层的
        //实例化了一个promise
        // new Promise((resolve,reject) => {
        //     resolve();
        // })
        // //这个then就是对上一个promise的处理then和外部的promise是两个独立的promise
        // .then(v => {
        //     return new Promise((resolve,reject) => {
        //         resolve('第二个promise');
        //     }).then(value => {
        //         console.log(value);
        //         return value;
        //     });
        // }).then(value => {
        //     console.log(value);
        // });


        //这是对上面代码的优化,把内部的then提取出来
        // new Promise((resolve,reject) => {
        //     resolve();
        // })
        // .then(v => {
        //     return new Promise((resolve,reject) => {
        //         resolve("第二个promise");
        //     });
        // })
        // .then(value => {
        //     console.log(value);
        //     return value;
        // })
        // .then(value => {
        //     console.log(value);
        // })
        // ;

        //循环调用
        //如果then返回与promise相同将禁止执行
        // let promise = new Promise(resolve => {
        //     resolve();
        // });

        // let p2 = promise.then(() => {
        //     return p2;
        // });
        

        //promise返回值是promise对象，则需要更新状态后，才可以继续执行后面的promise
        // new Promise((resolve,reject) => {
        //     resolve(
        //          new Promise((resolve,reject) => {
        //             setTimeout(() => {
        //                 resolve("解决状态");
        //             },2000)
        //         })
        //     );
        // }).then(
        //     v => {
        //         console.log(`fulfilled:${v}`);
        //         return new Promise((resolve,reject) => {
        //             setTimeout(() => {
        //                 reject("失败状态");
        //             },2000);
        //         });
        //     },
        //     v => {
        //         console.log(`rejected:${v}`);
        //     }
        // ).then(null,error => console.log(`rejecteds:${error}`))
        // ;


        /*
         *包含then方法的对象就是一个promise,系统将传递resolvePromise或者rejectPromise作为函数参数
         *下例中的  resolve或在then方法中返回了具有 then 方法的对象
         * 一个对象中有then方法，那么这个对象就是promise对象
         * 该对象即为promise 要先执行，并且在方法内部更改状态
         * 如果不更改状态，后面的then promise都在等待状态
        */

        // new Promise((resolve,reject) => {
        //     resolve({
        //         then(resolve,reject){
        //             resolve("解决状态");
        //         }
        //     });
        // }).then(v => {
        //     console.log(`fulfilled:${v}`);
        //     return {
        //         then(resolve,reject){
        //             setTimeout(() => {
        //                 reject("失败状态");
        //             },2000);
        //         }
        //     }
        // }).then(null,error => {
        //     console.log(`rejected:${error}`);
        // });


        function ajax(url,resolve,reject){
            let xhr = new XMLHttpRequest();
            xhr.open('GET',url);
            xhr.send();
            xhr.onload = function(){
                if(this.status == 200){
                    resolve(JSON.parse(this.response));
                }else{
                    reject(this);
                }
            }
        }

        //包含then方法的对象也可以当做promise来使用
       
        // class User {
        //     constructor(id) {
        //         this.id = id;
        //     }
        //     then(resolve, reject) {
        //         resolve(ajax(`http://localhost:8888/promise/php/houdunren.php?id=${this.id}`));
        //     }
        // }
        // new Promise((resolve, reject) => {
        // resolve(ajax(`http://localhost:8888/promise/php/user.php?name=向军`));
        // })
        // .then(user => {
        // return new User(user.id);
        // })
        // .then(lessons => {
        // console.log(lessons);
        // });



        //当然也可以是类
        // new Promise((resolve,reject) => {
        //     resolve(
        //         class {
        //             static then(resolve,reject){
        //                 setTimeout(() => {
        //                     resolve("解决状态");
        //                 },2000);
        //             }
        //         }
        //     );
        // }).then(
        //     v => {
        //         console.log(`fulfilled:${v}`);
        //     },
        //     v => {
        //         console.log(`reject :${v}`);
        //     }
        // );


        //如果对象中的then不是函数，则对象作为值传递
        // new Promise((resolve,reject) => {
        //     resolve();
        // }).then(() => {
        //     return {
        //         then : "后盾人"
        //     }
        // }).then(v => {
        //     console.log(v)
        // });


        



       


        








       




    </script>
</body>
</html>